<!DOCTYPE html>
<html lang="en">
<head>
    <title>回复详情</title>
    <titleType style="display: none;">index</titleType>
    <%- include('../../_global/baseLibs') %>

<link rel="stylesheet" href="/static/css/customCss/chat.css"/>
<link rel="stylesheet" href="/static/css/customCss/iconfont.css"/>
    <style>
        
       
    </style>
    <script src="/static/js/crypto-js.js"></script>
    <script src="/static/lib/touchslider.js"></script>
    <script>

        var page_consultDetail = (function($, page_consultDetail) {
         /* function screenFuc() {
        var topHeight = 0;//聊天头部高度
        //屏幕小于768px时候,布局change
        alert(1);
        var winWidth = $(window).innerWidth();
        if (winWidth <= 768) {
            var totalHeight = $(window).height(); //页面整体高度
            $(".chatBox-info").css("height", totalHeight - topHeight);
            var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
            //中间内容高度
            $(".chatBox-content").css("height", infoHeight - 46);
            $(".chatBox-content-demo").css("height", infoHeight - 46);

            $(".chatBox-list").css("height", totalHeight - topHeight);
            $(".chatBox-kuang").css("height", totalHeight - topHeight);
            $(".div-textarea").css("width", winWidth - 45);
        } else {
            $(".chatBox-info").css("height", 495);
            $(".chatBox-content").css("height", 448);
            $(".chatBox-content-demo").css("height", 448);
            $(".chatBox-list").css("height", 495);
            $(".chatBox-kuang").css("height", 495);
            $(".div-textarea").css("width", 260);
        }
    }*/
            var key = "jkcs";

            $.JkcsUserInfo.getUserInfoGzd({
                callback: function(userInfo){
                    page_consultDetail.userInfo = userInfo;
                }
            });

            page_consultDetail.init = function(cfg){
                 initAnswersDetail();






              
               screenFuc();
               //未读信息数量为空时
    var totalNum = $(".chat-message-num").html();
    if (totalNum == "") {
        $(".chat-message-num").css("padding", 0);
    }
    $(".message-num").each(function () {
        var wdNum = $(this).html();
        if (wdNum == "") {
            $(this).css("padding", 0);
        }
    });
    //      发送信息
    $("#chat-fasong").click(function () {
        var textContent = $(".div-textarea").html().replace(/[\n\r]/g, '<br>')
        if (textContent != "") {

           
            var params = {
                content:textContent,
                answerId:$.QuickUrlUtils.getRequest("answerId")
            };
             $.QuickRemote.AjaxJson({
                funcName:"/api/gzd/question/question"
                ,callback:function(data){
                    var date = new Date();

                   $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">"+date.Format("yyyy-MM-dd HH:mm")+"</small> </div> " +
                "<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +
                "<div class=\"chat-avatars\"><img src=\"/static/images/family/userInfo_head.png\" alt=\"头像\" /></div> </div> </div>");
                
                 var answerList =  StoreCache.getCache("answerDetails");
                 var cont = {"answerId":"","content":textContent,"doctorId":"","doctorName":"","doctorPhoto":"","hospitalName":"","isAdopt":"","isAsk":"1","postTime":date.Format("yyyy-MM-dd HH:mm")};
                 answerList.push(cont);
                 StoreCache.setCache("answerDetails",answerList);

                //发送后清空输入框
                $(".div-textarea").html("");
                //聊天框默认最底部
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });

                },params:params
            });              
            
        }
    }); 

            }
        
          $(".chatBox-kuang").show();
          //初始化对话信息
         function  initAnswersDetail(){
           var answerList =  StoreCache.getCache("answerDetails");
           var lis = [];
           $(answerList).each(function(index, item){
                      var doctor = $($("#doctor").html());
                      var patient = $($("#patient").html());
                      if(item["isAsk"] != "1"){
                        $(doctor).find(".chat-date").text(item["postTime"]);
                        $(doctor).find(".chat-message").text(item["content"]);
                         lis.push(doctor);
                      }else{
                        $(patient).find(".chat-date").text(item["postTime"]);
                        $(patient).find(".chat-message").text(item["content"]);
                         lis.push(patient);
                      }                     
                     
                  });
           $("#chatBox-content-demo").append(lis);
          
          
         

         }
            return page_consultDetail;
        })(jQuery, {});

         function screenFuc() {
  
        var topHeight = 0;//聊天头部高度
        //屏幕小于768px时候,布局change
        var winWidth = $(window).innerWidth();
        var winHight = $(window).innerHeight();
        
  
        if (winWidth <= 768) {
         
            var totalHeight = $(window).height(); //页面整体高度
            $(".chatBox-info").css("height", totalHeight - topHeight);
            var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
            //中间内容高度
            $(".chatBox-content").css("height", infoHeight - 46);
            $(".chatBox-content-demo").css("height", infoHeight - 46);

            $(".chatBox-list").css("height", totalHeight - topHeight);
            $(".chatBox-kuang").css("height", totalHeight - topHeight);
            $(".div-textarea").css("width", winWidth - 45);
        } else {
            
            $(".chatBox-info").css("height", 495);
            $(".chatBox-content").css("height", 448);
            $(".chatBox-content-demo").css("height", 448);
            $(".chatBox-list").css("height", 495);
            $(".chatBox-kuang").css("height", 495);
            $(".div-textarea").css("width", 260);


        }


        if(winHight <= 400){
           
             var totalHeight = $(window).height(); //页面整体高度
            $(".chatBox-info").css("height", winHight);
            var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度

            //中间内容高度
            $(".chatBox-content").css("height", winHight - 46);
            $(".chatBox-content-demo").css("height", winHight - 46);

            $(".chatBox-list").css("height", winHight);
            $(".chatBox-kuang").css("height", winHight);

            $(".div-textarea").css("width", winWidth - 45);
        }
         $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
         

    }
    (window.onresize = function () {
    // $(".chatBox-kuang").fadeToggle();
        screenFuc();
    })();
    //      发送图片
   /* function selectImg(pic) {
        if (!pic.files || !pic.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var images = evt.target.result;
            $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">2017-12-02 14:26:58</small> </div> " +
                "<div class=\"right\"> <div class=\"chat-message\"><img src=" + images + "></div> " +
                "<div class=\"chat-avatars\"><img src=\"img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        };
        reader.readAsDataURL(pic.files[0]);

    }*/
    </script>
    <script type="text/html" id="doctor">
        <div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="left">
                                <div class="chat-avatars"><img src="/static/images/doctor/doc.png" alt="头像"/></div>
                                <div class="chat-message">
                                   
                                </div>
                            </div>
                        </div>       
    </script>
    <script type="text/html" id="patient">
        <div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="right">
                                <div class="chat-message"></div>
                                <div class="chat-avatars"><img src="/static/images/family/userInfo_head.png" alt="头像"/></div>
                            </div>
                        </div>

    </script>
</head>
<body>

    <!--内容-->
   <section>
<div class="chatContainer">
    <div class="chatBtn">
        <i class="iconfont icon-xiaoxi1"></i>
    </div>
    <div class="chat-message-num">10</div>
    <div class="chatBox" ref="chatBox">
       
        <div class="chatBox-info" >
            <div class="chatBox-kuang" ref="chatBoxkuang">
                <div class="chatBox-content">
                    <div class="chatBox-content-demo" id="chatBox-content-demo">
<!-- demo注释
                        <div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="left">
                                <div class="chat-avatars"><img src="/static/images/doctor/doc.png" alt="头像"/></div>
                                <div class="chat-message">
                                    给你看张图
                                </div>
                            </div>
                        </div>

                        <div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="left">
                                <div class="chat-avatars"><img src="/static/images/doctor/doc.png" alt="头像"/></div>
                                <div class="chat-message">
                                    <img src="/static/images/shouye2/backgroundimageYs.png" alt="">
                                </div>
                            </div>
                        </div>

                        <div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="right">
                                <div class="chat-message">嗯，适合做壁纸</div>
                                <div class="chat-avatars"><img src="/static/images/family/userInfo_head.png" alt="头像"/></div>
                            </div>
                        </div>
 -->

                    </div>
                </div>
                <div class="chatBox-send">
                    <div class="div-textarea" contenteditable="true"></div>
                    <div>                     
                        <!-- <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles">
                            <input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png"
                                   name="file" id="inputImage" class="hidden">
                            <i class="iconfont icon-tuxiang"></i>
                        </label> -->
                        <button id="chat-fasong" class="btn-default-styles"><i class="iconfont icon-fasong"></i>
                        </button>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

    <!--内容END-->    
</section>
</body>
</html>
